let path = require('path')
const { VueLoaderPlugin } = require("vue-loader/dist/index")
const HtmlWebpackPlugin = require('html-webpack-plugin') //生成index.html文件
const { DefinePlugin } = require('webpack') //定义全局变量 webpack的内置插件

module.exports = {
  // 当前模式是开发模式development
  //  node|development|production
  //  默认是production生产模式
  entry: "./src/main.js",
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, '../build'),
    // 对打包后的资源进行从命名  所有资源都叫这个
    // assetModuleFilename: "abc.jpg"
    // 把clean设置为true的效果和CleanWeboackPlugin的效果一致
  },
  // 模块解析相关的
  resolve: {
    // 尝试按照这些顺序添加后缀名进行解析
    // 如果是文件
    // 如果文件具有扩展名，则直接打包文件
    // 否则将使用resolve.extensions中的选项作为文件扩展名解析
    extensions: [".js", ".json", ".vue", ".jsx", ".ts", ".tsx"], //后缀解析 扩展名 配置了在导入的时候就不用谢后缀了
    // 如果是文件夹
    // 会在文件夹中根据resolve.mainFiles配置选项中指定的文件顺序查找
    // resolve.mainFiles的默认值是['index']
    // 然后再根据resolve.extensions来解析扩展名


    // 别名 文件夹别名
    alias: {
      utils: path.resolve(__dirname, "./src/utils")
    }

  },

  module: {
    // loader是解析器
    // Babel是转换器
    rules: [
      {
        // 告诉webpack匹配什么文件
        test: /\.css$/,
        use: [//use中的多个loader的使用顺序是从后往前的，从右向左
          // { loader: 'style-loader' },
          // { loader: 'css-loader' },
          'style-loader',
          'css-loader',
          'postcss-loader',
          // {
          //   loader: 'postcss-loader',
          //   options: {
          //     postcssOptions: {
          //       plugins: [
          //         "autoprefixer"
          //       ]
          //     }
          //   }

          // },
        ]
        // 简写一：只有一个loader的时候
        // loader: 'css-loader'
        // 简写二：如果loader没有其他配置属性的时候，可以不用加入一个对象中
        // use:['style-loader','css-loader']  一开始还是记完整形式就好了

      },
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'less-loader'
          },
          {
            loader: 'postcss-loader'
          },

        ]
      },
      {
        // 以前处理文件是用的file-loader，现在处理文件webpack已经内置了
        test: /\.(png|jpe?g|svg|gif)$/,
        // 1.打包图片，并且这些图片有自己的hash地址，将地址设置到img/背景中
        // 缺点：多图片加载的网络请求
        // type: "asset/resource" //告诉它要处理的是资源类型

        // 2.将图片进行base64编码，然后把编码后的源码放到打包的js文件中
        // 缺点：造成js文件非常大，下载js文件本身消耗的时间非常长，造成js代码下载和解析/执行的时间过长
        // type: "asset/inline" //告诉它要处理的是资源类型


        // 3.合理规范
        // 对于小一点的图片，进行base64编码
        // 对于大一点的图片，单独的图片打包，形成url地址，单独的请求这个url图片
        type: "asset",
        // 配置规则
        parser: {
          dataUrlCondition: {
            // 1kb = 1024 b  bytes
            // 这里的单位是b
            maxSize: 60 * 1024  //这里就是60kb  超过60kb就使用 asset/resource  小于就 asset/inline
          }
        },
        // 本次配置的资源打包后都叫这个
        generator: {
          // 使用占位符不写死名称
          // name:指向原来图片的名称
          // ext:指向原来图片的扩展名
          // hash:webpack生成的哈希值 :8截取前八位
          // img/自动生成文件夹，然后把打包后的图片放到里边
          filename: "img/[name]_[hash:8][ext]"
        }

      },
      {
        test: /\.js$/,
        use: [
          {
            // babel到底是什么呢？
            /* 
            Bable是一个工具链，主要用于旧浏览器或者环境中将ES5以上的代码转换为向后兼容版本的javascript
            包括：语法转换、源代码转换等
            Bable本身是一个独立的工具(postcss一样)
            */
            loader: 'babel-loader',
            // options: {
            //   plugins: [
            //     "@babel/plugin-transform-arrow-functions",
            //     "@babel/plugin-transform-block-scoping"
            //   ]
            // }
            // 未抽离预设的情况下
            // options:{
            //   preset:[
            //     "@babel/preset-env"
            //   ]
            // }
          }
        ]
      },
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',

          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    // 删掉之前打包好的文件夹
    // new CleanWebpackPlugin(),
    // 自动生成index.html,自动引入打包好的js文件
    new HtmlWebpackPlugin({
      title: "电商项目",
      // 指定生成的index.html的模板
      template: './index.html'
    }),
    new DefinePlugin({
      // 后边的值部分，双引号里边会被当成js代码来执行的，如果要写字符串的话，就要加单引号，否则就相当于直接写在一个js文件中
      BASE_URL: "'./'",
      coderwhy: "'why'",
      counter: "123"

    })
  ]
}